<template>
<div>
<!-- 收索框 -->
  <div style="position:sticky;top: 0;width: 100%;z-index: 9999">
    <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="center"
        @click-input="click"
        readonly
    />
  </div>
<!--轮播图-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in list" :key="item.goods_id"><img :src="item.image_src" alt=""></van-swipe-item>
  </van-swipe>
<!-- nav-->
  <van-grid :gutter="10" :column-num="navlist.length" square>
    <van-grid-item v-for="(item,index) in navlist" :key="index">
      <van-image :src="item.image_src" />
    </van-grid-item>
  </van-grid>
  <!-- 楼层项 -->
</div>
</template>

<script>
import {useStore,mapActions}from 'vuex'
import {ref,toRefs} from "vue"
import {useRouter}from "vue-router"
export default {
  name: "home",
  setup(){
    const Store=useStore();
    const router=useRouter()
    Store.dispatch('home/getbanner')
    Store.dispatch('home/getnav')
    Store.dispatch('home/getfloor')
    const value = ref('');
    //路由跳转去收索页
    const click=()=>{
     router.push({
       path:'/serch'
     })
    }
    return {
      value,click,...toRefs(Store.state.home)
    };
  },
  methods:{
    ...mapActions['getbanner','getnav','getfloor']
  }
}
</script>

<style scoped lang="less">

.van-swipe-item{
  img{width: 100%;height: 100%}
}
.van-grid{
  flex-wrap:initial;
}
.van-grid-item{
  .van-image{
    width: 100%}
}
</style>